<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    .box {
        width: 900px;
        height: 500px;
        margin: auto;
        /* background: antiquewhite; */
        position: relative;
    }

    .head {
        width: 900px;
        height: 100px;
        background: white;
    }

    .head ul li {
        /* width: 286px;
        height: 100px; */
        padding-left: 106px;
        padding-right: 106px;
        float: left;
        line-height: 100px;
        list-style: none;
        text-align: center;
    }

    .content {
        width: 900px;
        height: 400px;
        background: chartreuse;
        position: absolute;
        top: 100px;
        left: 0;
        margin: auto;
    }

    .left,
    .conter,
    .right {
        height: 400px;
        text-align: center;
        line-height: 400px;
        display: none;
    }
    .box1{
        height: 400px;
        text-align: center;
        line-height: 400px;
        display: none;
    }
</style>

<body>
    <div class="box">
        <div class="head">
            <ul>
                <li>我是头部1</li>
                <li>我是头部2</li>
                <li>我是头部3</li>
            </ul>
        </div>
        <!-- <div class="content">
            <div class="left">我是内容1</div>
            <div class="conter">我是内容2</div>
            <div class="right">我是内容3</div>
        </div> -->
        <div class="box1">11111</div>
        <div class="box1">22222</div>
        <div class="box1">33333</div>
    </div>
</body>
<script>
    $(function () {
        // $('li').mouseover(function(){
        //     // $('li:first').show()
        //     $('.left').show(function(){
        //         $('.conter').hide()
        //         $('.right').hide()
        //     })
        //     $('.conter').show(function(){
        //         $('.left').hide()
        //         $('.right').hide()
        //     })
        //     $('.right').show(function(){
        //         $('.left').hide()
        //         $('.conter').hide()
        //     })
        // })
        // $('li:first').mouseover(function(){
        //     $('li:first').css('background','red')
        //     $('li:eq(1)').css('background','white')
        //     $('li:last').css('background','white')
        //     $('.left').show()
        //     $('.conter').hide()
        //     $('.right').hide()
        // })
        // $('li:eq(1)').mouseover(function(){
        //     $('li:first').css('background','white')
        //     $('li:eq(1)').css('background','red')
        //     $('li:last').css('background','white')
        //     $('.left').hide()
        //     $('.conter').show()
        //     $('.right').hide()
        // })
        // $('li:last').mouseover(function(){
        //     $('li:first').css('background','white')
        //     $('li:eq(1)').css('background','white')
        //     $('li:last').css('background','red')
        //     $('.left').hide()
        //     $('.conter').hide()
        //     $('.right').show()
        // })
        $('.box1:first').show()
        $('li').hover(function () {
            var index = $(this).index()
            $('.box1').hide()
            $('.box1:eq(' + index + ')').show()
        })
    })
</script>

</html>